<template>
	<div class="Info">
		<div class="breadcrumb">
			<el-breadcrumb separator-class="el-icon-arrow-right">
			  <el-breadcrumb-item :to="{ name: 'managerUser' }">用户管理</el-breadcrumb-item>
			  <el-breadcrumb-item>用户信息查看</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div id="userInfo">
			<div class="userInfo-title panel">
				<p>个人信息</p>
			</div>
			<div class="u-info">
				<table>
					<tr>
						<td class="td-name">用户名：</td>
						<td class="td-value">{{user.username}}</td>
						<td class="td-name">密码：</td>
						<td class="td-value">{{user.password}}</td>
					</tr>
					<tr>
						<td class="td-name">身份：</td>
						<td class="td-value">{{user.level | level}}</td>
						<td class="td-name">年龄：</td>
						<td class="td-value">{{user.answer | age}}</td>
					</tr>
					<tr>
						<td class="td-name">车辆：</td>
						<td class="td-value">
							<span v-if="hasCar">{{user.car}}</span>
							<span v-if="!hasCar">
								<a href="" @click.prevent='addUserCar(user.id,user.username)'>添加车辆</a>
							</span>
						</td>

					</tr>
					<tr>
						<td class="td-name">昵称：</td>
						<td class="td-value"><input type="text" v-model="user.name" class="input-info" maxlength="10" /></td>
						<td class="td-name">性别：</td>
						<td class="td-value"><input type="text" class="input-info" v-model="user.sex" maxlength="1" style="width:100px;"></td>
					</tr>

					<tr>
						<td class="td-name">邮箱：</td>
						<td class="td-value"><input type="text" class="input-info" v-model="user.mail" maxlength="25">
						</td>
						<td>
							<el-button class="btn" @click="updateUserInfo" type="primary" size="small">保存信息</el-button>
						</td>
					</tr>

				</table>
			</div>
			<div id="userPic">
				<img v-bind:src="pic" class="img-pic" width="70" height="70" />
				<div class="file-upload">
					<button class="file-btn">修改头像</button>
					<input type="file" class="file-pic" name="aaa" accept="image/png,image/jpg,image/jpeg" @change="upload($event)"
					 ref="upload-pic" />
				</div>

			</div>

		</div>

		<div id="userDriving" v-if="!noDriving">
			<div class="userDriving-title panel">
				<p>行驶状况</p>
			</div>
			<div class="u-info">
				<table>
					<tr>
						<td class="td-name">车牌：</td>
						<td class="td-value">{{dirving.license_num}}</td>
						<td class="td-name">车速：</td>
						<td class="td-value">{{dirving.speed}} Km/h</td>
					</tr>
					<tr>
						<td class="td-name">起始位置：</td>
						<td class="td-value">
							<span v-if="!flag">({{dirving.dep_place_lon}} , {{dirving.dep_place_lat}})</span>
							<span v-if="flag">{{loc[0]}}</span>
						</td>
						<td class="td-name">现在位置：</td>
						<td class="td-value">
							<span v-if="!flag">({{carNowLoc.cur_loc_lon}} , {{carNowLoc.cur_loc_lat}})</span>
							<span v-if="flag">{{loc[1]}}</span>
						</td>
					</tr>
					<tr>

						<td class="td-name">目的位置：</td>
						<td class="td-value">
							<span v-if="!flag">({{dirving.des_lon}} , {{dirving.des_lat}})</span>
							<span v-if="flag">{{loc[2]}}</span>
						</td>
						<td><el-button @click="flag = !flag" type="info" size="mini">地址解析</el-button></td>
						<td><el-button @click="showMap = !showMap" type="info" size="mini">路线查看</el-button></td>
					</tr>
				</table>
				<div>
				</div>
			</div>
			<keep-alive include="mapComponent">
				<div id="showMap">
					<mapComponent :gongneng='gongneng' :loc='ptList' :info='carinfo' :speed='dirving.speed' v-if="showMap"></mapComponent>
				</div>
			</keep-alive>
		</div>

	</div>
</template>

<script>
	import BMap from 'BMap'
	import mapComponent from './mapComponent.vue'
	export default {
		components: {
			mapComponent
		},
		data() {
			return {
				user: {},
				id: '',
				pic: require('@/assets/beforelogin.png'),
				dirving: {},
				loc: [],
				flag: false,
				noDriving: true,
				showMap: false,
				ptList: [], //将经纬度转化成point形式
				carinfo: '', //传给地图组件的信息
				oldPic: '',
				carNowLoc: '',
				gongneng: 1,
				hasCar: false
			}
		},
		filters: {
			level: (value) => {
				if (value == 0) {
					return "用户"
				}
				if (value == 1) {
					return "管理员"
				}
			},
			age: (value = '') => {
				let a = [];
				a = value.split('-');
				let date = new Date();
				let year = date.getFullYear();
				return year - a[0];
			}
		},
		created() {
			this.id = this.$route.query.user_id;
			this.asyncInfo()
		},

		methods: {
			async asyncInfo() {
				await this.getUserInfo();
				await this.getUserPic();
				await this.getDrivingInfo();

			},
			addUserCar(id,username) {
				this.$router.push({
					path: '/main/manager/addCar',
					query: {
						id:id,
						user: username
					}
				})
			},
			//逆地址解析 ( 第一步将数据 point化  第二步将point逆地址解析)
			getLocationFrist(dirving) {
				this.ptList = [
					new BMap.Point(dirving.dep_place_lon, dirving.dep_place_lat),
					new BMap.Point(dirving.cur_loc_lon, dirving.cur_loc_lat),
					new BMap.Point(dirving.des_lon, dirving.des_lat)
				]
				this.getLocationThen();
			},
			getLocationThen() {
				let geoc = new BMap.Geocoder();
				for (let i in this.ptList) {
					let pt = this.ptList[i];
					geoc.getLocation(pt, (result) => {
						let addComp = result.addressComponents;
						this.loc[i] = addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " +
							addComp.streetNumber;
					})
				}
			},
			getUserInfo() {
				this.$axios.get('/api/info/userInfo', {
						params: {
							id: this.id
						}
					})
					.then(data => {
						if (data.status == 200) {
							this.user = data.data[0];
							if (this.user.car != null) {
								this.hasCar = true
								this.getCarInfoByNum(this.user.car)
							} else {
								this.hasCar = false
							}
							if (this.user.id === this.$store.state.user[0].id) {
								this.$store.commit('setStorage', data.data)
							}
							return;
						}
					})
					.catch(err => {
						console.log(err)
					})
			},

			getDrivingInfo() {
				this.$axios.get('/api/info/drivingInfo', {
						params: {
							user_id: this.id
						}
					})
					.then(data => {
						if (data.data.length != 0) {
							if (data.status == 200) {
								this.dirving = data.data[0];
								this.getLocationFrist(this.dirving);
								this.getCarNowLoc(this.dirving.car_id);
								this.carNowLoc = {
									cur_loc_lon: this.dirving.cur_loc_lon,
									cur_loc_lat: this.dirving.cur_loc_lat
								}
								this.getCarinfo(this.dirving.car_id);
							}
							this.noDriving = false;
						}


					})
					.catch(err => {

					})
			},
			getCarinfo(id) {

				this.$axios.post('/api/admin/carInfo', {
						id: id
					})
					.then(data => {
						if (data.status == 200) {
							this.carinfo = data.data[0];
						}
					})
					.catch(err => {
						console.log(err)
					})
			},
			getCarInfoByNum(car_num) {
				this.$axios.get('/api/info/carInfoByNum', {
						params: {
							num: car_num
						}
					})
					.then(data => {
						if (data.status == 200) {
							this.carinfo = data.data[0];

						}
					})
					.catch(err => {
						console.log(err)
					})
			},
			//长轮询 一直想服务器请求查找车辆现在的位置信息
			getCarNowLoc(car_id) {
				this.$axios.get('/api/info/getCarNowLoc', {
						params: {
							id: car_id
						}
					})
					.then(data => {
						if (data.data.length != 0) {
							if (JSON.stringify(this.carNowLoc) != JSON.stringify(data.data[0])) {

								this.carNowLoc = data.data[0];
								let a = new BMap.Point(this.carNowLoc.cur_loc_lon, this.carNowLoc.cur_loc_lat)
								this.ptList.splice(1, 1, a);

							}
							this.getCarNowLoc(car_id)
						}

					})
			},
			getUserPic() {
				this.$axios.get('/api/upload/getUserPic', {
						params: {
							user_id: this.id
						},
						responseType: 'blob'
					})
					.then(data => {
						if (data.status == 200) {

							if (data.data.size != 0) {

								let reader = new FileReader()
								reader.onload = e => {
									this.pic = e.target.result
								}
								reader.readAsDataURL(data.data);
							}
						}
					})
				this.$axios.get('/api/upload/getUserPicDir', {
						params: {
							user_id: this.id
						},
					})
					.then(data => {
						if (data.status == 200) {
							if (data.data.size != 0) {
								this.oldPic = data.data;

							}
						}
					})
			},
			upload(event) {
				let regx = /image/;
				let file = event.target.files[0];
				if (regx.test(file.type)) {
					let data = new FormData()
					data.append('file', file);
					data.append('id', this.id)
					this.$axios.post('/api/upload/uploadUserPic', data, {
							headers: {
								'Content-Type': 'multipart/form-data'
							},
						})
						.then(data => {
							if (data.status == 200) {
								this.getUserInfo();
								this.getUserPic();
								this.deletePic();
							}
						})
				}

			},
			//上传成功后删除原先服务器的图片
			deletePic() {
				if (this.oldPic != '') {
					this.$axios.get('/api/upload/deleteUserPic', {
						params: {
							oldPic: this.oldPic
						}
					}).catch(err => {
						console.log(err)
					})
				}

			},
			updateUserInfo() {
				let info = {
					id: this.id,
					sex: this.user.sex,
					name: this.user.name,
					mail: this.user.mail
				}
				this.$axios.post('/api/info/updateUserInfo', {
						user: info
					})
					.then(data => {
						if (data.status == 200) {
							this.getUserInfo();
						}
					})
					.catch(err => {
						console.log(err)
					})
			}
		}
	}
</script>

<style lang="less" scoped>
	.Info {
		width: 100%;
		height: 100%;
		.breadcrumb{
			height: 28px;
			span{
				line-height: 28px;
		
			}
		}

		.title() {
			border-bottom: 1px solid #E0ECFF;
			width: 100%;
			height: 26px;
			font-size: 18px;
			text-align: left;
			color: black;
			background: -webkit-linear-gradient(top, #EFF5FF 0, #E0ECFF 100%);
			background: -moz-linear-gradient(top, #EFF5FF 0, #E0ECFF 100%);
			background: -o-linear-gradient(top, #EFF5FF 0, #E0ECFF 100%);
			background: linear-gradient(to bottom, #EFF5FF 0, #E0ECFF 100%);
		}

		.td-table(@w, @ta) {
			width: @w;
			height: 40px;
			line-height: 40px;
			text-align: @ta;
		}

		.td-name {
			.td-table(100px, right)
		}

		.td-value {
			.td-table(160px, left)
		}
		
		.info(){
			width: 80%;
			margin-top: 18px;
			margin-left: 88px;
			background-color: #fff;
		}
		#userInfo {
			.info();
			border: 1px solid #E0ECFF;
			position: relative;

			.userInfo-title {
				.title();

				p {
					width: 300px;
					line-height: 26px;
					padding-left: 2px;
				}
			}

			.u-info {
				color: #000;
				font-size: 16px;


			}

			#userPic {
				border: 1px solid #E0ECFF;
				width: 80px;
				height: 110px;
				position: absolute;
				top: 30px;
				right: 20px;

				.img-pic {
					border-radius: 50%;
				}

				.file-upload {
					position: relative;
					margin-top: 10px;

					.file-pic {
						position: absolute;
						top: 0;
						left: 0;
						opacity: 0;
					}

					.file-btn {
						width: 70px;
						font-size: 12px;
					}

				}
			}

			.input-info {
				border: 1px solid #000;
				width: 200px;
			}

		}

		#userDriving {
			.info();
			margin-top: 0px;
			border: 1px solid #E0ECFF;

			.td-name {
				line-height: normal;

			}

			.td-value {
				.td-table(200px, left);
				width: 200px;
				overflow-x: auto;
				line-height: normal;

				span {
					margin-top: 5px;
					;
					width: 200px;
					text-overflow: ellipsis;
					overflow: hidden;
				}

			}

			.userDriving-title {
				.title();

				p {
					width: 300px;
					line-height: 26px;
					padding-left: 2px;
				}
			}
		}

		#showMap {
			width: 650px;
			height: 250px;
			margin-top: 10px;
			overflow: hidden;
		}
	}
</style>
